<template>
  <div class="home">
    <div class="title-wrap">
      <div class="waste-enterprise-num">
        <img
          src="@/assets/images/layout/roduction-enterpeise.png"
          alt=""
          class="left"
        />
        <div class="content">
          <div class="name">产废企业</div>
          <div class="num">{{ dataNum.enterprise }}</div>
        </div>
        <img
          src="@/assets/images/layout/roduction-enterpeise-right.png"
          alt=""
          class="right"
        />
      </div>
      <div class="dispose-enterprise-num">
        <img
          src="@/assets/images/layout/dispose-icon.png"
          alt=""
          class="left"
        />
        <div class="content">
          <div class="name">处置企业</div>
          <div class="num">{{ dataNum.enterprise_third }}</div>
        </div>
        <img
          src="@/assets/images/layout/dispose-icon-right.png"
          alt=""
          class="right"
        />
      </div>
      <div class="enterprise-device-num">
        <img
          src="@/assets/images/layout/enterprise-set.png"
          alt=""
          class="left"
        />
        <div class="content">
          <div class="name">产废设施</div>
          <div class="num">{{ dataNum.device }}</div>
        </div>
        <img
          src="@/assets/images/layout/enterprise-set-right.png"
          alt=""
          class="right"
        />
      </div>
    </div>
    <div class="change-wrap">
      <div class="change-num">
        <div class="title-wrap">
          <div class="left">
            <img src="@/assets/images/layout/chart-icon.png" alt="" />
            <span>更换量</span>
            <div class="change-total-num">更换总量 <span>{{dataNum.num_total_stock}}</span>吨</div>
          </div>

          <!-- <div class="right">
            <el-date-picker
              style="margin-right: 9px; width: 155px"
              v-model="changeParams.year"
              type="year"
              placeholder="请选择年份"
            />
            <el-select
              style="width: 155px; margin-right: 14px"
              v-model="changeParams.month"
              clearable
              placeholder="请选择月份"
            >
              <el-option
                v-for="item in months"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              style="width: 155px"
              v-model="changeParams.wastetype"
              clearable
              placeholder="请选择类型"
            >
              <el-option
                v-for="item in wasteList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div> -->
        </div>
        <div class="chart-line">
          <ChartsLineChangeNum :lineChange="lineChange" />
        </div>
      </div>
      <div class="no-change-num">
        <div class="title-wrap">
          <div class="left">
            <img src="@/assets/images/layout/chart-icon.png" alt="" />
            <span>更换量</span>
          </div>
          <div class="right">
            <span @click="jumpToChange">更多</span>
            <button>
              <img src="@/assets/images/layout/more.png" alt="" />
            </button>
          </div>
        </div>
        <div class="no-change-num-charts">
          <ChartsPieNoChangeNum :pieChangeData="pieChangeData" />
          <div class="num-msg">
            <div class="change-num">
              <div class="circle"></div>
              <div class="num">
                已更换量 <span>{{ dataNum.stock }}</span> 吨
              </div>
            </div>
            <div class="no-change-num">
              <div class="circle"></div>
              <div class="num">
                未更换量 <span>{{ dataNum.unstock }}</span> 吨
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dispose-wrap">
      <div class="change-num">
        <div class="title-wrap">
          <div class="left">
            <img src="@/assets/images/layout/chart-icon.png" alt="" />
            <span>处置量</span>
            <div class="change-total-num">处置总量 <span>{{dataNum.num_total_dispose}}</span>吨</div>
          </div>

          <!-- <div class="right">
            <el-date-picker
              style="margin-right: 9px; width: 155px"
              v-model="changeParams.dateVal1"
              type="year"
              placeholder="请选择年份"
            />
            <el-select
              style="width: 155px; margin-right: 14px"
              v-model="changeParams.dateVal"
              clearable
              placeholder="请选择月份"
            >
              <el-option
                v-for="item in months"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              style="width: 155px"
              v-model="changeParams.dateVal3"
              clearable
              placeholder="请选择类型"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div> -->
        </div>
        <div class="chart-line">
          <DisposeLineChangeNum :lineDispose="lineDispose" />
        </div>
      </div>
      <div class="no-change-num">
        <div class="title-wrap">
          <div class="left">
            <img src="@/assets/images/layout/chart-icon.png" alt="" />
            <span>处置量</span>
          </div>
          <div class="right">
            <span @click="jumpToDispose">更多</span>
            <button>
              <img src="@/assets/images/layout/more.png" alt="" />
            </button>
          </div>
        </div>
        <div class="no-change-num-charts">
          <DisposePieNoChangeNum :pieDisposeData="pieDisposeData" />
          <div class="num-msg">
            <div class="change-num">
              <div class="circle"></div>
              <div class="num">
                已处置量 <span>{{ dataNum.dispose }}</span> 吨
              </div>
            </div>
            <div class="no-change-num">
              <div class="circle"></div>
              <div class="num">
                未处置量 <span>{{ dataNum.undispose }}</span> 吨
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import http from "@http";
import ChartsLineChangeNum from "./ChartsLineChangeNum/index.vue";
import ChartsPieNoChangeNum from "./ChartsPieNoChangeNum/index";
import DisposeLineChangeNum from "./DisposeLineChangeNum/index";
import DisposePieNoChangeNum from "./DisposePieNoChangeNum/index";
import { useRouter } from "vue-router";
import useStore from "@/stores/modules/home.ts";
import ElMessage from "@/components/ElMessage.js";
let changeParams = reactive({});
let $store = useStore();
let lineChange = ref([]);
let $router = useRouter();
let lineDispose = ref([]);
let pieDisposeData = ref({});
let pieChangeData = ref({});
let dataNum = reactive({});
let wasteList = ref([]);
let months = reactive([]);
for (var i = 0; i < 12; i++) {
  months.push({
    label: i + 1 + "月",
    value: i + 1,
  });
}
let jumpToDispose = () => {
  $router.push("/declaresearch/disposedetail");
};
let jumpToChange = () => {
  $router.push("/declaresearch/wastedetail");
};
const options = [
 
];
let getList = () => {
  http({ url: "/admPCGraphHomeSum/getGraphData" }).then((res) => {
    dataNum.dispose = res.data.fan_num_dispose;
    dataNum.stock = res.data.fan_num_stock;
    dataNum.undispose = res.data.fan_num_undispose;
    dataNum.unstock = res.data.fan_num_unstock;
    dataNum.device = res.data.num_device;
    dataNum.enterprise = res.data.num_enterprise;
    dataNum.enterprise_third = res.data.num_enterprise_third;
    dataNum.num_total_dispose = res.data.num_total_dispose;
    dataNum.num_total_stock = res.data.num_total_stock;
    lineChange.value = {
      x: res.data.line_stock_arrTm,
      y: res.data.line_stock_arrDataY,
    };
    lineDispose.value = {
      x: res.data.line_dispose_x,
      y: res.data.line_dispose_y,
    };
    pieDisposeData.value = {
      x: res.data.fan_num_dispose,
      y: res.data.fan_num_undispose,
      yp: res.data.fan_percent_dispose,
      np: res.data.fan_percent_undispose,
    };
    pieChangeData.value = {
      x: res.data.fan_num_stock,
      y: res.data.fan_num_unstock,
      yp: res.data.fan_percent_stock,
      np: res.data.fan_percent_unstock,
    };
  });
  ElMessage({ msg: "获取数据成功" });
  // res.data.fan_percent_dispose
  //       res.data.fan_percent_stock
  //       res.data.fan_percent_undispose
  //      res.data.fan_percent_unstock
};
getList();
http({ url: "/listitem/getmodule", data: { module: " B03" } }).then((res) => {
  wasteList.value = res.data.map((item) => {
    return {
      label: item.name,
      value: item.id,
    };
  });
});
watch(
  () => changeParams,
  () => {
    getList();
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  padding: 10px 32px 0 20px;
  overflow: hidden;
  .change-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .change-num {
      margin-top: 1vh;
      width: 1056px;
      height: 36vh;
      background: #ffffff;
      border-radius: 10px;

      .title-wrap {
        padding-top: 20px;
        padding-left: 24px;
        .left {
          display: flex;
          align-items: center;
          span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 24px;
            color: #000000;
          }
          img {
            width: 27px;
            height: 20px;
            margin-right: 12px;
          }
          .chart-line {
            height: auto;
            margin-top: 100px;
            width: 1056px;
          }
          .change-total-num {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 22px;
            color: #333333;
            height: 38px;
            margin-left: 108px;
            span {
              font-family: SeoulNamsan EB;
              font-weight: 400;
              font-size: 31px;
              color: #333333;
            }
          }
        }
        .right {
          padding-right: 27px;
        }
      }
    }
    .no-change-num {
      width: 519px;
      height: 36vh;
      background: #ffffff;
      border-radius: 10px;
      margin-top: 1vh;
      .no-change-num-charts {
        /* display: flex; */
        width: 519px;
        .num-msg {
          display: flex;
          align-items: center;

          .change-num {
            width: auto;
            height: auto;
            display: flex;
            align-items: center;
            padding-left: 41px;
            .circle {
              width: 13px;
              height: 13px;
              background: #0874fa;
              border-radius: 50%;
              margin-right: 9px;
            }
            .num {
              font-weight: 400;
              font-size: 22px;
              color: #959fa2;

              span {
                font-weight: 400;
                font-size: 24px;
                color: #333333;
              }
            }
          }
          .no-change-num {
            width: auto;
            height: auto;
            display: flex;
            align-items: center;
            margin-left: 47px;
            .circle {
              width: 13px;
              height: 13px;
              background: #ff7e39;
              border-radius: 50%;
              margin-right: 9px;
            }
            .num {
              font-weight: 400;
              font-size: 22px;
              color: #959fa2;

              span {
                font-weight: 400;
                font-size: 24px;
                color: #333333;
              }
            }
          }
        }
      }
      .title-wrap {
        display: flex;
        align-items: center;

        padding-top: 27px;
        padding-left: 26px;
        padding-right: 28px;
        justify-content: space-between;
        .left {
          img {
            width: 27px;
            height: 20px;
          }
          span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 24px;
            color: #000000;
            margin-left: 9px;
          }
        }
        .right {
          display: flex;
          align-items: center;
          cursor: pointer;
          span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 22px;
            color: #7e8a96;
            margin-right: 8px;
          }

          img {
            width: 4px;
            height: 20px;
          }
        }
      }
    }
  }
  .dispose-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .change-num {
      margin-top: 1vh;
      width: 1056px;
      height: 36vh;
      background: #ffffff;
      border-radius: 10px;

      .title-wrap {
        padding-top: 20px;
        padding-left: 24px;
        .left {
          display: flex;
          align-items: center;
          span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 24px;
            color: #000000;
          }
          img {
            width: 27px;
            height: 20px;
            margin-right: 12px;
          }
          .chart-line {
            height: auto;
            margin-top: 100px;
            width: 1056px;
          }
          .change-total-num {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 22px;
            color: #333333;
            height: 38px;
            margin-left: 108px;
            span {
              font-family: SeoulNamsan EB;
              font-weight: 400;
              font-size: 31px;
              color: #333333;
            }
          }
        }
        .right {
          padding-right: 27px;
        }
      }
    }
    .no-change-num {
      width: 519px;
      height: 36vh;
      background: #ffffff;
      border-radius: 10px;
      margin-top: 1vh;
      .no-change-num-charts {
        /* display: flex; */
        width: 519px;
        .num-msg {
          display: flex;
          align-items: center;

          .change-num {
            width: auto;
            height: auto;
            display: flex;
            align-items: center;
            padding-left: 41px;
            .circle {
              width: 13px;
              height: 13px;
              background: #00d385;
              border-radius: 50%;
              margin-right: 9px;
            }
            .num {
              font-weight: 400;
              font-size: 22px;
              color: #959fa2;

              span {
                font-weight: 400;
                font-size: 24px;
                color: #333333;
              }
            }
          }
          .no-change-num {
            width: auto;
            height: auto;
            display: flex;
            align-items: center;
            margin-left: 47px;
            .circle {
              width: 13px;
              height: 13px;
              background: #ff7e39;
              border-radius: 50%;
              margin-right: 9px;
            }
            .num {
              font-weight: 400;
              font-size: 22px;
              color: #959fa2;

              span {
                font-weight: 400;
                font-size: 24px;
                color: #333333;
              }
            }
          }
        }
      }
      .title-wrap {
        display: flex;
        align-items: center;

        padding-top: 27px;
        padding-left: 26px;
        padding-right: 28px;
        justify-content: space-between;
        .left {
          img {
            width: 27px;
            height: 20px;
          }
          span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 24px;
            color: #000000;
            margin-left: 9px;
          }
        }
        .right {
          display: flex;
          align-items: center;
          cursor: pointer;
          span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 22px;
            color: #7e8a96;
            margin-right: 8px;
          }

          img {
            width: 4px;
            height: 20px;
          }
        }
      }
    }
  }
  .title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .waste-enterprise-num,
    .dispose-enterprise-num,
    .enterprise-device-num {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 519px;
      height: 15vh;
      background: #ffffff;
      border-radius: 10px;
      padding-left: 47px;
      padding-right: 39px;
      .left {
        width: 73px;
        height: 73px;
      }
      .content {
        display: flex;
        flex-direction: column;

        .name {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 28px;
          color: #666666;
          text-align: center;
        }
        .num {
          margin-top: 23px;
          text-align: center;

          font-family: SeoulNamsan EB;
          font-weight: 400;
          font-size: 40px;
          color: #000000;
        }
      }
      .right {
        width: 78px;
        height: 66px;
      }
    }
  }
  :deep(.el-input) {
    height: 40px;
    background: #f4f8fb !important;
    border-radius: 5px;

    box-shadow: none !important;
  }

  :deep(.el-input__wrapper:hover) {
    box-shadow: none;
  }
  :deep(.is-focue) {
    box-shadow: none !important;
  }
  :deep(.el-input__wrapper) {
    background: #f4f8fb !important;
    box-shadow: none;
  }
  :deep(.el-input__wrapper.is-focus) {
    box-shadow: none !important;
  }
  :deep(.el-select::placeholder) {
    font-size: 110px;
  }
  :deep(.el-input__inner) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #7e8a96;
  }
}
</style>
